<%--
  Created by IntelliJ IDEA.
  User: gu
  Date: 2021/7/15
  Time: 11:54 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>规则详情</title>
  <!-- CSS -->
  <jsp:include page="../include/headtag.jsp" />
  <!-- <link rel="stylesheet"
      href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
  <link rel="stylesheet"
        href="assets/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/form-elements.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <%
    /********** 保存网站的基本路径 ***********/
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    //将该路径地址缓存到 session中 ,例如：http://localhost:8090/tjnu_ssh_1128/
    session.setAttribute("mybasePath", basePath);
  %>
  <script src="${mybasePath}assets/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="container-fluid" id="mydivs"></div>
<script type="text/javascript">
  function createAddEnumDivByData(index,detailsnames,detailsvalues){
    var html='<div class="container-fluid" style="display: none" id="addenums'+index+'">' +
            '<br/><div class="row">' +
            '<div class="col-md-1"><input class="btn btn-primary bg-color-red" value="添加枚举" onclick="addEnum('+index+')"></div>' +
            '</div><div class="row" style="margin-top: 10px">' +
            '<div class="col-md-5"><p>含义</p></div>' +
            '<div class="col-md-5"><p>编码</p></div>' +
            '<div class="col-md-2"><p>操作</p></div>' +
            '</div>';
    var dm=detailsnames.split(","); //字符分割
    var dv=detailsvalues.split(","); //字符分割
    for (var i=0;i<dm.length ;i++)
    {
      html=html+'<div class="row" style="margin-top: 10px">' +
              '<div class="col-md-5"><input type="text" class="form-control" size="10" name="enum_names[]" value="'+dm[i]+'" required="required" readonly="readonly"></div>' +
              '<div class="col-md-5"><input type="text" class="form-control" size="10" name="enum_values[]" value="'+dv[i]+'" placeholder="输入码段位数之内的数字" oninput="codeLengthChangeInput('+index+',this)" required="required" readonly="readonly"></div>' +
              '<div class="col-md-2"><input type="button" class="btn btn-info" value="已用"></div>' +
              '</div>';
    }
    html=html+' </div>';
    $("#mydivs").append(html);
  }
  function createAddNonEnumDivByData(index,upperLimit,lowerLimit){
    var html='<div class="container-fluid" style="display: none" id="addnonenums'+index+'">' +
            '<div class="form-group has-feedback ">' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">上限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess1" value="'+upperLimit+'" required="required"  readonly="readonly">' +
            '</div>' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">下限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess2" value="'+lowerLimit+'" required="required" readonly="readonly">' +
            '</div>' +
            '</div>' +
            '</div>';
    $("#mydivs").append(html);
  }
</script>
<%--动态生成div--%>
<script type="text/javascript">
  function createLayFrame(){
    layui.use('layer', function(){ //独立版的layer无需执行这一句
      var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
      var code_category=0;
      var index_now=1;
      //触发事件
      var active = {
        setTop: function(){
          var that = this;
          //多窗口模式，层叠置顶
          layer.open({
            type: 1 //此处以iframe举例
            ,title: mytitle
            ,area: ['780px', '520px']
            ,shade: 0
            ,maxmin: false
            ,offset: 'auto'
            ,content: mycontext
            ,cancel:function (){
              var detailsname='';
              var detailsvalue='';
              var place=$("#dynamicTable tbody input[name='index'][value="+index_now+"]").parent().parent().index()+1;
              if(code_category==1){
                var dn=$("#addenums"+index_now+" input[name='enum_names[]']");
                var dv=$("#addenums"+index_now+" input[name='enum_values[]']");
                for(var i=0;i<dn.length;i++){
                  detailsname=detailsname+dn[i].value+',';
                  detailsvalue=detailsvalue+dv[i].value+',';
                }
                detailsname=detailsname.substring(0,detailsname.length-1);
                detailsvalue=detailsvalue.substring(0,detailsvalue.length-1);

                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(2)").value=detailsname;
                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                $(eval("addenums"+index_now)).hide();
              }else {
                var ul=$("#addnonenums"+index_now+" input[name='inputGroupSuccess1']");
                var ll=$("#addnonenums"+index_now+" input[name='inputGroupSuccess2']");
                detailsvalue=detailsvalue+ul[0].value+',';
                detailsvalue=detailsvalue+ll[0].value;
                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(2)").value="thisis,nonenum";
                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                $(eval("addnonenums"+index_now)).hide();
              }
              layer.closeAll();
            }
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero, index){
            }
            ,end: function(){
            }
          });
        }
      };
      $("[name='details']").on('click', function(){
        code_category=$(this).parent().parent().find("select").val();
        index_now=$(this).parent().find("[name='index']").val();
        if (code_category==1){
          //枚举类
          var id ='#addenums'+index_now;
          mytitle="枚举类添加";
          mycontext=$(id);
        }else {
          //非枚举类
          mytitle="非枚举类添加";
          mycontext=$("#addnonenums"+index_now);
        }
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
      });
      //多窗口模式 - esc 键
      $(document).on('keyup', function(e){
        if(e.keyCode === 27){
          layer.close(layer.escIndex ? layer.escIndex[0] : 0);
        }
      });
    });
  }
  function createCodeCode(index){
    createDynamicTableRow(index);
    createAddEnumDiv(index);
    createLayFrame();
  }
</script>
<jsp:include page="../include/head.jsp" />
<jsp:include page="../include/menu.jsp" />
<div id="page-wrapper" style="margin-top: 50px;">
  <div id="page-inner">
    <div class="row">
      <div class="col-md-12">
        <div class="text-left">
          <a href="/index">首页</a>&nbsp;&gt;&nbsp;<a href="/codeManageIndex" class="acts CurrChnlCls">编码管理</a>&nbsp;&gt;&nbsp;<a href="/codeChangeList" class="acts CurrChnlCls">可修改编码列表</a>&nbsp;&gt;&nbsp;<a class="acts CurrChnlCls">修改编码</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-left">编码修改</h3>
        <div class="col-md-12">
          <div class="nav navbar-nav navbar-right">
            <a href="/codeDesignIndex">自定义编码设计</a>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <br />
    <div class="container-fluid">
      <form action="/codeChangeApplication" class="col-sm-12 select-info table-bordered" method="post" onsubmit="return isCodeCodeEmpty()">
        <input type="hidden" name="codeRuleId" value="${param.codeRuleId}">
        <table class="table-bordered">
          <br />
          <!------------------------------------------------------码段前的多个选择输入框部分----------------------------------------------------------->
          <tr>
            <div class="row">
              <div class="form-horizontal">
                <div class="col-md-2">
                  <label for="codeDesignName">方案名称</label>
                </div>
                <div class="col-md-2">
                  <input id="codeDesignName" class="form-control" name="codeDesignName" value="${codeRule.codeRuleName}" readonly="readonly">
                </div>
                <div class="col-md-2">
                  <label for="userName">申请人</label>
                </div>
                <div class="col-md-2">
                  <input id="userName" class="form-control" name="userName" readonly="readonly" value="${creatorName}">
                </div>
                <div class="col-md-2">
                  <label for="categoryOptions">大类码段</label>
                </div>
                <div class="col-md-2">
                  <select id="categoryOptions" class="form-control" role="select" name="categoryOptions" onchange="keepCategoryOptions()">
                    <option value="1">动物</option>
                    <option value="2">房间</option>
                    <option value="3">表单</option>
                    <option value="4">项目</option>
                    <option value="5">人事</option>
                    <option value="6">实验</option>
                    <option value="7">设备</option>
                    <option value="8">样本</option>
                  </select>
                </div>
              </div>
              <br />
              <br />
              <div class="form-horizontal">
                <div class="col-md-2">
                  <label for="serial_number">流水号位数</label>
                </div>
                <div class="col-md-2">
                  <input id="serial_number" class="form-control" name="serial_number" value="${codeRule.serialNumber}" readonly="readonly">
                </div>
                <div class="col-md-2">
                  <label for="category">种类名称</label>
                </div>
                <div class="col-md-2">
                  <input  id="category" name="category" class="form-control" value="${category.category}"  readonly="readonly">
                </div>
                <div class="col-md-2">
                  <label for="categorydetail">种类码段</label>
                </div>
                <div class="col-md-2">
                  <input placeholder="输入两位字母或数字" oninput="this.value=this.value.replace(/[\W]/g,'');if(this.value.length>2)this.value=this.value.slice(0,2)" id="categorydetail" name="categorydetail" class="form-control" required="required" value="${category.details}"   readonly="readonly"/>
                </div>
              </div>
            </div>
          </tr>
          <br />
          <tr>
            <div class="row">
              <div class="form-horizontal">
                <div class="col-md-1">
                  <label for="codeDescribe">详细描述 </label>
                </div>
                <div class="col-md-11">
                        <textarea id="codeDescribe" class="form-control" name="codeDescribe"
                                  style="resize: none;
                                  LINE-HEIGHT:18px;padding: 3px;width:100%;height:100px;max-width:100%;max-height: 100px;">${codeRule.codeRuleIntro}</textarea>
                </div>
              </div>
            </div>
          </tr>
          <br />
          <tr>
            <div class="row">
              <table id="dynamicTable" class="table table-hover text-nowrap" style="table-layout:fixed;word-break:break-all;">
                <tbody>
                <tr>
                  <td align="center">
                    码段名称
                  </td>
                  <td align="center">
                    码段种类
                  </td>
                  <td align="center">
                    码段位数
                  </td>
                  <td align="center" >
                    详细描述
                  </td>
                </tr>
                <!------------------------------------------------------码段具体部分----------------------------------------------------------->
                <c:set var="i" value="0" />
                <c:set var="j" value="0" />

                <c:forEach begin="1" end="${basicEnumSums.size()+nonEnums.size()}" var="codecodecount" varStatus="loop" step="1">
                  <c:choose>
                    <c:when test="${basicEnumSums[i].codeCodeId==codecodecount}">
                      <tr>
                        <td align="center">
                          <input class="form-control" name="code_names[]" value="${basicEnumSums[i].details}" style="width: 132.5px;height: 50px"   readonly="readonly"/>
                        </td>
                        <td align="center">
                          <select class="form-control" role="select" name="code_categorys[]" style="width: 132.5px;height: 50px" onchange="this.selectedIndex=0">
                            <option value="1" selected>枚举</option>
                            <option value="2">非枚举</option>
                          </select>
                        </td>
                        <td align="center">
                          <input class="form-control" role="select" name="code_nums[]" style="width: 130px;height: 50px" value="${basicEnumSums[i].codeLength}" readonly="readonly"/>
                        </td>
                        <td align="center">
                          <input type="hidden" name="index" value="${codecodecount}">
                          <input type="hidden" name="detailsname[]" value="${basicEnumSums[i].detailsNames}">
                          <input type="hidden" name="details[]" value="${basicEnumSums[i].basicEnumerations}">
                          <input type="button" value="修改" class="btn btn-success" data-method="setTop" name="details">
                        </td>
                        <script type="text/javascript">
                          createAddEnumDivByData("${codecodecount}","${basicEnumSums[i].detailsNames}","${basicEnumSums[i].basicEnumerations}");
                          createLayFrame();
                        </script>
                      </tr>
                      <c:set var="i" value="${i+1}" />
                    </c:when>
                    <c:otherwise>
                      <tr>
                        <td align="center">
                          <input class="form-control" name="code_names[]" value="${nonEnums[j].details}" style="width: 132.5px;height: 50px"   readonly="readonly"/>
                        </td>
                        <td align="center">
                          <select class="form-control" role="select" name="code_categorys[]" style="width: 132.5px;height: 50px" onchange="this.selectedIndex=1">
                            <option value="1">枚举</option>
                            <option value="2" selected>非枚举</option>
                          </select>
                        </td>
                        <td align="center">
                          <input class="form-control" role="select" name="code_nums[]" style="width: 130px;height: 50px"  readonly="readonly" value="${nonEnums[j].codeLength}"/>
                        </td>
                        <td align="center">
                          <input type="hidden" name="index" value="${codecodecount}">
                          <input type="hidden" name="detailsname[]" value="">
                          <input type="hidden" name="details[]" value="${nonEnums[j].upperLimit},${nonEnums[j].lowerLimit}">
                          <input type="button" value="修改" class="btn btn-success" data-method="setTop" name="details">
                        </td>
                        <script type="text/javascript">
                          createAddNonEnumDivByData("${codecodecount}","${nonEnums[j].upperLimit}","${nonEnums[j].lowerLimit}");
                          createLayFrame();
                        </script>
                      </tr>
                      <c:set var="j" value="${j+1}" />

                    </c:otherwise>

                  </c:choose>

                </c:forEach>
                </tbody>
              </table>
            </div>
          </tr>
          <br />

          <tr>
            <div class="row">
              <div class="form-horizontal">
                <div class="col-md-1">
                  <label for="manageContent">修改原因 </label>
                </div>
                <div class="col-md-11">
                        <textarea id="manageContent" class="form-control" name="manageContent"
                                  style="resize: none;
                                  LINE-HEIGHT:18px;padding: 3px;width:100%;height:100px;max-width:100%;max-height: 100px;" required="required"></textarea>
                </div>
              </div>
            </div>
          </tr>
          <br />

          <tr>
            <div class="row">
              <input type="hidden" id="codeCodeCount" name="codeCodeCount">
              <button type="submit" class="col-lg-4 col-lg-offset-4" name="submit">提交</button>
            </div>
          </tr>
        </table>
      </form>

    </div>
  </div>
  <!-- /. PAGE INNER  -->
</div>

<!-- /. PAGE WRAPPER  -->

</body>
<%--<!-- Javascript -->--%>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/jquery.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>

<script type="text/javascript">
  function addEnum(index){
    var html=
            '<div class="row" style="margin-top: 10px">' +
            '<div class="col-md-5"><input type="text" class="form-control" size="10" name="enum_names[]" required="required"></div>' +
            '<div class="col-md-5"><input type="text" class="form-control" size="10" name="enum_values[]" placeholder="输入码段位数之内的数字" oninput="codeLengthChangeInput('+index+',this)" required="required"></div>' +
            '<div class="col-md-2"><input type="button" class="btn btn-danger" onclick="delEnum(this,'+index+')" value="删除"></div>' +
            '</div>';
    $("#addenums"+index).append(html);
  }
  function delEnum(opp,index) {
    var enumLength = $("#addenums"+index+" div.row").length;
    if (enumLength <= 3) {
      alert("至少保留一行");
    } else {
      $(opp).parent().parent().remove();//移除当前行
    }
  }
  function codeLengthChangeInput(index,code_code) {
    var code_length = $('input[name="index"][value="'+index+'"]').parent().prev().find("input").val();
    if(code_code.value.length==1){
      code_code.value=code_code.value.replace(/[^0-9]/g,'');
    }else{
      code_code.value=code_code.value.replace(/\D/g,'');}
    if(code_code.value.length>code_length)
      code_code.value=code_code.value.slice(0,code_length);
  }
</script>
<script type="text/javascript">
  function isCodeCodeEmpty() {
    document.getElementById("codeCodeCount").value=document.getElementsByName("code_nums[]").length;
    var inputlist = document.getElementsByTagName("input");
    for (var i = 0; i < inputlist.length; i++) {
      if (inputlist[i].type == "text" && inputlist[i].value == "") {
        layer.alert("码段详细描述不能为空");
        return false;
      }
    }
    return true;
  }
</script>
<script  type="text/javascript">
  keepCategoryOptions();
  function keepCategoryOptions(){
    var s = document.getElementById('categoryOptions');
    for(var i = 0 ;i < s.options.length;i++){
      if(s.options[i].value ==  ${codeRule.ruleCategoryId}){
        s.options[i].selected = true;
      }
    }
  }
</script>
</html>

